<template>
    <div>
        <h2>房号显示列表</h2>
        <input type="button" value="新增" class="btn btn-primary" @click="add">
        <input type="button" value="批量删除" class="btn btn-danger" @click="Del">
        <input type="button" value="批量上架" class="btn btn-info" @click="Upd(0)">

        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkAll">
                    </td>
                    <td>房型</td>
                    <td>房间号码</td>
                    <td>房间描述</td>
                    <td>状态</td>
                </tr>

                <tr v-for="item in aa.list" :key="item.Id">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="checkOne">
                    </td>
                    <td>{{ item.TypeId }}</td>
                    <td>{{ item.NumName }}</td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.State == 0 ? "上架" : "下架" }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router'
const router = useRouter();
const route = useRoute();
import moment from 'moment';

//-------批量上架-------
const Upd = (state: any) => {
    if (ids.value.length == 0) {
        alert('至少选中一项');
        return;
    }
    if (confirm('确认修改吗')) {
        axios({
            method: 'put',
            url: '/api/HouseType/UpdStateAll',
            params: {
                ids: ids.value.toString(),
                state: state
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('成功');
                    getshow();
                    checked.value=false;
                    ids.value=[];
                }
                else {
                    alert('失败');
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//--------批量删除-----
const Del = () => {
    if (ids.value.length == 0) {
        alert('至少选中一项');
        return;
    }
    if (confirm('确认删除吗')) {
        axios({
            method: 'delete',
            url: '/api/HouseType/DelAll',
            params: {
                ids: ids.value.toString()
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('成功');
                    getshow();
                    checked.value=false;
                }
                else {
                    alert('失败');
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//考试结束

//考试完成

//----------全选全不选
let checked = ref(false);
let ids = ref([]);
const checkAll = () => {
    checked.value = !checked.value;
    if (checked.value == true) {
        ids.value = aa.list.map((item: any) => {
            return item.Id;
        })
    }
    else {
        ids.value = [];
    }
}
//反选
const checkOne = () => {
    if (ids.value.length == aa.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}

onMounted(() => {
    getshow();
})

//---------显示-----------
let aa: any = reactive({
    list: []
})
const getshow = () => {
    axios({
        method: 'get',
        url: '/api/HouseType/ShowNum'
    })
        .then(res => {
            console.log(res);
            aa.list = res.data;
        })
        .catch(err => {
            console.log(err);
        })
}
const add = () => {
    router.push('/numAdd')
}
</script>

<style scoped>
input[type="button"] {
    margin-right: 10px;
}</style>